import React, { Component, createRef } from 'react'
import '../assets/scss/Home.scss'
import { Swiper, Space, Button } from 'antd-mobile'
import { RightOutline } from 'antd-mobile-icons'
import PicScroll from '../components/PicScroll'
export default class App extends Component {
  // 生成一个ref 绑定Swiper子组件 通过ref获取子组件实例对象 操作轮播切换方法
  ref1 = createRef()
  next = () => {
    console.log('下一页')
    this.ref1.current.swipeNext()
  }
  render() {
    document.title = '星巴克 | 用每一杯咖啡传递星巴克独特的咖啡体验'
    const banners = [
      'https://artwork.starbucks.com.cn/banners-homepage-banner/main_7fc4f760-6926-4eeb-9304-06581dd9a737.jpg',
      'https://artwork.starbucks.com.cn/banners-homepage-banner/main_feb2427d-ca7e-42db-a34e-9ff635006ce3.png',
      'https://artwork.starbucks.com.cn/banners-homepage-banner/main_7fc4f760-6926-4eeb-9304-06581dd9a737.jpg',
      'https://artwork.starbucks.com.cn/banners-homepage-banner/main_b9426020-8329-432e-b95e-b3e81cb33401.jpg'
    ]
    const items = banners.map((banner, index) => (
      <Swiper.Item key={index}>
        <div className="content">
          <img src={banner} alt="" />
          <div className="tab_ad">广告</div>
          <div className="tab_next" onClick={this.next}>
            <RightOutline fontSize={40} />
          </div>
        </div>
      </Swiper.Item>
    ))
    const pics = [
      'https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/tmall-2020-06-29-zh.jpg',
      'https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/starbucks-design-studio-web-china.jpg',
      'https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/homepage-career-new.png'
    ]
    // 精选列表
    const cardList = [
      {
        id: 1,
        pic: 'https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-card-01-update.png',
        title: '会员星礼包',
        title1: '星享卡新升级',
        title2: '更多心意好礼'
      },
      {
        id: 2,
        pic: 'https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-card-02.png',
        title: '星礼卡',
        title1: '用一份心礼',
        title2: '让心意相随'
      },
      {
        id: 3,
        pic: 'https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-eticket.png',
        title: '电子产品券',
        title1: '心意',
        title2: '从这一杯开始'
      },
      {
        id: 4,
        pic: 'https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-reserve.png',
        title: '咖啡生活',
        title1: '星巴克',
        title2: '用心制作'
      }
    ]
    // 咖啡讲堂
    const coffeeHouse = [
      {
        id: 1,
        tag: '咖啡知识',
        pic: 'https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/coffeehouse-coffee-cultivation-kv.jpg',
        title: '咖啡的起源与培植'
      },
      {
        id: 2,
        tag: '咖啡品鉴',
        pic: 'https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/coffeehouse-4-fundamentals-kv.jpg',
        title: '咖啡调制'
      },
      {
        id: 3,
        tag: '咖啡知识',
        pic: 'https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/coffeehouse-roast-story-kv.jpg',
        title: '咖啡烘焙'
      },
      {
        id: 4,
        tag: '咖啡品鉴',
        pic: 'https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/coffeehouse-pour-over-kv.jpg',
        title: '手冲咖啡'
      }
    ]
    return (
      <>
        {/* 头部导航栏 */}
        <div className="nav">
          <span>心情惬意，来杯咖啡吧&nbsp;☕</span>
        </div>
        {/* banner轮播 */}
        <div>
          <Swiper autoplay loop indicator={() => null} ref={this.ref1}>
            {items}
          </Swiper>
        </div>
        {/* banner图片 */}
        <div className="banner">
          {pics.map((item, index) => (
            <img src={item} key={index} alt="" />
          ))}
        </div>
        {/* 星享俱乐部 */}
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center'
          }}
        >
          <h2>星享俱乐部</h2>
          <p
            style={{
              fontSize: '16px',
              wordWrap: 'break-word',
              wordBreak: 'normal',
              paddingLeft: '24px',
              paddingRight: '24px'
            }}
          >
            开启您的星享之旅,星星越多、会员等级越高、好礼越丰富。
            <a href="https://www.starbucks.com.cn/">了解更多</a>
          </p>
          {/* 注册 登录按钮 */}
          <Space justify="center" block>
            <Button shape="rounded" fill="outline" color="success">
              注册
            </Button>
            <Button shape="rounded" fill="outline" color="success">
              登录
            </Button>
          </Space>
          <div>
            <img
              src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo-msr-20210601.svg"
              alt=""
            />
          </div>
        </div>
        {/* 星巴克精选 */}
        <div className="wrapper">
          <div>星巴克精选</div>
          <div>在星巴克天猫旗舰店发现更多咖啡心意</div>
          <div>
            {cardList.map((item) => (
              <div className="card" key={item.id}>
                <img src={item.pic} alt="" />
                <div>{item.title}</div>
                <div>{item.title1}</div>
                <div>{item.title2}</div>
                <div>了解更多 &gt; </div>
              </div>
            ))}
          </div>
        </div>
        {/* 咖啡星讲堂 */}
        <div className="coffeehouse">
          <h2>1912派克街 | 咖啡星讲堂</h2>
          <p>了解更多星巴克咖啡文化</p>
          <div>
            <PicScroll data={coffeeHouse}></PicScroll>
            {/* <PicScroll id="swiper2" data={coffeeHouse} speed={3000}></PicScroll> */}
          </div>
        </div>
        <div style={{ marginTop: 20, color: '#ccc', textAlign: 'center' }}>
          仅供练习使用HTML2205
        </div>
      </>
    )
  }
}
